<template>
  <div>
    <div class="formleft">
      <div class="formleft-tel">
        <div class="formleft-tel-icon">
          <i class="iconfont icon-shouji"></i>
        </div>
        <div class="formleft-tel-input">
          <mt-field label="" :attr="{maxlength:11}" placeholder="请输入11位手机号" v-model="formdata.tel" type="tel">
          </mt-field>
        </div>
      </div>
      <div class="formleft-password">
        <div class="formleft-password-icon">
          <i class="iconfont icon-suo"></i>
        </div>
        <div class="formleft-password-input">
          <mt-field label="" :attr="{maxlength:16}" placeholder="请输入6~16位字符密码" :type="isShowPwd" v-model="formdata.password" :disableClear="true">
            <i @click="isShowPwdFn(isShowPwd)" class="iconfont" style="font-size:18px;" :class="{'icon-yanjing1':isShowPwd=='password','icon-yanjing':isShowPwd=='text'}"></i>
          </mt-field>
        </div>
      </div>
      
      <mt-button type="primary" @click="loginP" style="margin-top:1rem;">登录</mt-button>
      <div class="register-box" @click="linkRegister">注册</div>
      <!-- <p class="association">
        <span @click="iconChange">
          <i class="iconfont icon-goufangxianxing" v-if="iconShow"></i>
          <i class="iconfont icon-wugoufangxianxing" v-else></i>
        </span>&nbsp; 我已阅读
        <router-link to="/registerassociation">《水珠钱包注册协议》</router-link>
      </p> -->
    </div>
  </div>
</template>
<script>
// 引入模态框和loading
import { MessageBox,Indicator } from 'mint-ui';
import bus from '../../js/bus'
export default {
  name: 'password',
  data() {
    return {
      // 登录所需参数
      formdata: {
        tel: window.sessionStorage.getItem('phone')?window.sessionStorage.getItem('phone'):'',
        password: ''
      },
      // 是否勾选协议
      isShowPwd:'password',
      iconShow: true
    }
  },
  watch: {
    // 监听手机号码变化，保存手机号码显示在输入框
    formdata: {
      //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
      handler(curVal, oldVal) {
        window.sessionStorage.setItem('phone', curVal.tel);
      },
      deep: true
    }
  },
  methods: {
    isShowPwdFn(val){
      if(val == 'text'){
        this.isShowPwd = 'password'
      }else{
        this.isShowPwd = 'text'
      }
    },
    // 是否勾选协议
    iconChange() {
      this.iconShow = !this.iconShow;
    },
    // 登录
    loginP() {
      let password = this.formdata.password;
      if (!this.iconShow) { //是否勾选水珠钱包协议
        MessageBox.alert('请先阅读水珠钱包注册协议~')
      } else if (!(/^1[34578]\d{9}$/.test(this.formdata.tel))) {   //正则判断手机号码是否正确
        MessageBox('提示', '请输入正确的手机号码~');
        return
      // } else if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(this.formdata.password))) {
      }else 
      //if(!(/^[a-z0-9A-Z]{6,16}$/.test(this.formdata.password))){
      if(password.length < 6){
         //正则判断密码是否符合规则（6~12位数字或字母组成）
        MessageBox('提示', '密码需由6~16位数字或字符组成~');
        return
      } else {
        //  密码登录参数
        let postData = {
          phone: this.formdata.tel,
          pwd: this.formdata.password,
          channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):''
        }
        // 登录接口
        Indicator.open('加载中···');
        this.$http.post('/loansupermarket-app/user/login', postData)
          .then((response) => {
            var resBody = response.body;
            if (resBody.code == '000') {
              // 存储用户上下文信息
              window.sessionStorage.setItem('nickname',resBody.data.nickName||resBody.data.phone||'');
              window.sessionStorage.setItem('realName',resBody.data.name||'');
              window.sessionStorage.setItem('phone',resBody.data.phone||'');
              window.sessionStorage.setItem('idcardCode',resBody.data.idCard||'');
              window.sessionStorage.setItem('headImg',resBody.data.head_Img_Url||'static/img/logo.png');

              // TUDO 获取用户数据 如 头像
              // 查询支持储蓄卡
              this.$http.get('/loansupermarket-pay/card/bind/loadSupportBank?cardType=1').then(function(response){
                var resBody = response.body;
                if(resBody.code=='000'){
                  window.localStorage.setItem('bankList',JSON.stringify(resBody.data));
                }else{
                  MessageBox.alert(resBody.mesg);
                }
              })
              // 查询支持信用卡
              this.$http.get('/loansupermarket-pay/card/bind/loadSupportBank?cardType=2').then(function(response){
                var resBody = response.body;
                if(resBody.code=='000'){
                  window.localStorage.setItem('creditCardList',JSON.stringify(resBody.data));
                }else{
                  MessageBox.alert(resBody.mesg);
                }
              })
              
              //查询用户信息

              setTimeout(()=> {
                Indicator.close();
                if (this.$route.query.history == 1) {
                  this.$router.go(-1);
                }else{
                  this.$router.push({path:'/main/home',query:{activityShow:1}})
                }
              }, 500)
              // 如果url带有platformId参数，那么跳转到贷款平台详情页，否则调到首页
              
              // if (this.$route.query.platformId) {
              //   this.$router.push({ path: '/loanplatformdetail?platformId=' + this.$route.query.platformId + '&&history=' + 1 })
              // } else if (this.$route.query.id && this.$route.query.index && this.$route.query.status) {
              //   // alert(1111111111);
              //   this.$router.push({ path: '/loanplatformdetail?id=' + this.$route.query.id + '&status=' + this.$route.query.status + '&index=' + this.$route.query.index })
              // } else if (this.$route.query.history && this.$route.query.history == 2) {
              //   this.$router.push({ path: '/main/mine' });
              // } else {
              //   this.$router.push({ path: '/main/home' });
              // }
            } else {
              Indicator.close();
              if(resBody.mesg){
                MessageBox.alert(resBody.mesg, '提示');
              }
              
            }
          })
      }
    },
    // 点击找回密码，跳转到找回密码页面
    findPassword() {
      this.$router.push({ path: '/forgetpassword' })
    },
    linkRegister(){
      this.$router.push({path:'/mainregister'});
    }
  }
}
</script>
<style lang="scss">
@import '../../scss/variable/base.scss';
.formleft {
  padding-top: 0.35rem;
  width: 90%;
  margin: 0 auto;
  &-tel {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      color: $iconColor;
      vertical-align: -25%;
    }
    &-input {
      flex: 10.8;
      margin-top: -0.05rem;
    }
  }
  &-password {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 4px;
    margin-top: 0.35rem;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-icon {
      flex: 1.2;
      color: $iconColor;
      .iconfont {
        vertical-align: -15%;
      } // color:red;
    }
    &-input {
      flex: 10.8;
    }
  }
  .forget-password {
    padding: 0;
    line-height: 1rem;
    font-size: 0.33rem;
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
  .mint-button {
    float: left;
    width: 45%;
    height: 1.2rem;
    box-shadow:none;
  }
  .association {
    text-align: left;
    font-size: 0.33rem;
    margin-top: 0.3rem;
    i:nth-child(1) {
      color: #f15252;
      vertical-align: -3%;
      font-size: 0.36rem;
    }
    i:nth-child(2) {
      color: #f15252;
      vertical-align: -4%;
      font-size: 0.36rem;
    }
    a {
      color: $primaryColor;
      text-decoration: underline;
    }
  }
}


.register-box{
  margin-top: 1rem;
  float: right;
  width: 45%;
  height: 1.2rem;
  line-height: 1.2rem;
  border: 1px solid $primaryDeepColor;
  border-radius: 4px;
  color:$primaryDeepColor;
  font-size: .5rem;
}

.mint-cell-wrapper {
  background-image: none;
}

.mint-cell:last-child {
  background-image: none;
}

.mint-cell-wrapper {
  padding: 0 10px 0 0;
}
</style>


